<template>
  <div>
    <div v-for="userDog in userDogs"
         style="margin-top:3%"
         v-if="registration">
      <el-card class="box-card"
               style="margin-left:15%">
        <div slot="header"
             class="clearfix"
             style="margin-left:44%">
          <span>我的宠物</span>
        </div>
        <div>
          <div>
            <img :src="userDog.dog_positive_image"
                 style="width:200px;height:200px">
          </div>

          <div>
            <h4 style="margin-left:7%">{{"状态 : "}}
              <span style="color:red">{{audit(userDog.status)}}</span>
            </h4>

          </div>

          <div style="float: left;margin-top:-43%;margin-left:40%">

            <h4>犬名:<span>
                {{userDog.dname}}
              </span></h4>

            <h4>犬种:<span>
                {{userDog.type}}
              </span>
            </h4>

            <h4>犬牌编号:<span>
                {{userDog.num_dog}}
              </span>
            </h4>

            <h4>电子犬证:<span>
                {{userDog.dogetc}}
              </span>
            </h4>

            <div style="margin-top:30%">
              <el-button type="primary"
                         @click="check_details(userDog)"
                         plain>查看详情</el-button>

              <el-button type="primary"
                         @click="logoutDog(userDog)"
                         plain>注销</el-button>
            </div>

          </div>
        </div>
      </el-card>
    </div>

    <!-- 需要填写的注销详情表 -->
    <div v-if="logout_details">
      <div>
        <h3 style="margin-left:15%">请选择注销原因<span>
            <el-select v-model="value"
                       style="margin-left:30%"
                       clearable
                       placeholder="请选择">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </span></h3>

        <!-- 华丽的分割线 -->
        <el-divider></el-divider>

        <!-- 详细描述 -->
        <div>
          <el-input type="textarea"
                    :rows="15"
                    placeholder="请输入详细描述"
                    v-model="textarea">
          </el-input>
        </div>

        <!-- 证明图片 -->
        <div>
          <h3 style="margin-top:10%;margin-left:5%">证明图片</h3>
          <el-upload class="avatar-uploader"
                     style="margin-left:20%;margin-top:-11%"
                     action="http://localhost:5051/image/upload"
                     :show-file-list="false"
                     :on-success="handleProveImage">
            <img v-if="prove_image"
                 :src="prove_image"
                 class="avatar" />
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

        <div>
          <el-button style="margin-top: 3%;margin-left:20%"
                     @click="goback">返回</el-button>

          <el-button style="margin-top: 3%;margin-left:40%"
                     @click="submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import common from "../../../assets/commons"
export default {
  data () {
    return {
      //这个保存从后端传上来的所有狗狗信息
      userDogs: {},
      //是否显示宠物基本信息
      registration: true,
      //是否显示需要填写的注销详情表
      logout_details: false,
      //详细信息
      textarea: '',
      //证明图片
      prove_image: '',
      //返回给后台的数据
      cancellation: {},
      options: [{
        value: '犬只失踪',
        label: '犬只失踪'
      }, {
        value: '犬只死亡',
        label: '犬只死亡'
      }],
      value: ''
    }
  },
  methods: {
    //通过id查询该角色下的宠物
    findNormalPet () {
      axios.get(common.baseUrl + "user/user/findNormalPet?id=" + this.$store.state.userid).then(res => {
        console.log(res);
        this.userDogs = res.data
      })
    },

    //查看详情
    check_details (userDog) {
      console.log(userDog);
    },

    //注销按钮
    logoutDog (userDog) {
      if (userDog.status == 2) {
        alert("该宠物已经注销,请勿重复提交");
        return;
      }
      if (userDog.status == 3) {
        alert("注销审批中,请勿重复提交");
        return;
      }
      if (userDog.status == 4) {
        alert("宠物被收缴,无法注销");
        return;
      }
      this.registration = false
      this.logout_details = true
      this.cancellation.pet_id = userDog.id
    },
    //上传证明图片成功的回调函数
    handleProveImage (res, file) {
      console.log(res);
      this.prove_image = res.data
    },

    //返回
    goback () {
      this.registration = true
      this.logout_details = false
    },

    //提交
    submit () {
      //注销原因
      this.cancellation.cause = this.value
      //详细描述
      this.cancellation.describe = this.textarea
      //证明图片
      this.cancellation.prove_image = this.prove_image
      //用户id
      this.cancellation.u_id = this.$store.state.userid
      //该用户下准备注销的宠物id
      //   this.cancellation.pet_id =

      axios.post(common.baseUrl + "user/user/cancelDog", this.cancellation).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          alert("发起注销成功,审核需要一到三天,请耐心等待")
          this.value = ""
          this.textarea = ""
          this.prove_image = ""
        } else {
          alert("网络错误,重新提交")
        }
      })
    },

    //狗狗状态
    audit (status) {
      if (status == 0) {
        return "正常"
      }
      if (status == 2) {
        return "已注销"
      }
      if (status == 3) {
        return "注销审核中"
      }
      if (status == 4) {
        return "收缴"
      }
    }

  },
  mounted () {
    //
    this.findNormalPet()
  },
  computed: {},
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #fffbfb;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 700px;
}
</style>
